<template>
  <div class="qua-temp__wapper">
    <affix :label="$t('configLazyLoad.qualityCheck.qualityTemplateList')">
      <el-row :gutter="24">
        <el-col :span="10">
          <template-table @clickEdit="changeAddTemp" @getScoring="getScoringData" @stop="changeQualityCheckTemplateStatus" :initTable="initTable" :pagination="pagination" @trunPage="trunPages" @getPass="getPassTemplate"></template-table>
        </el-col>
        <el-col :span="14">
          <keep-alive>
            <component
            :is="currentView"
            @add="saveQuality"
            :initData="initData"
            :isWhite="false"
            @update="saveQualityCheckTemplate">
              <!-- 非活动组件将被缓存！ -->
            </component>
          </keep-alive>
        </el-col>
      </el-row>
    </affix>
  </div>
</template>
<script>
  import Affix from '@/components/ui-modules/affix/Affix'
  import TemplateTable from '../base/quality-template/Table'
  import AddPassTemplate from '../curd/quality-template/AddPass'
  import AddScoringTemplate from '../curd/quality-template/AddScoring'
  import UpdateScoringTemplate from '../curd/quality-template/UpdateScoring'
  import ShowPassTemplate from '../curd/quality-template/ShowPass'
  export default {
    name: 'QualityTemplate',
    data () {
      return {
        initPassData: {},
        currentView: '',
        initTable: [],
        updateData: {},
        pagination: {
          count: 0,
          trunPage: 1
        }
      }
    },
    computed: {
      // 根据调用不同组件使用不同初始化数据
      initData () {
        return this.currentView === 'showPass' ? this.initPassData : this.updateData
      },
      // 根据调用不同组件（pass 与 打分）使用不同初始化数据
      saveQuality () {
        return this.currentView === 'addPass' ? this.saveQualityCheckTemplateTwo : this.saveQualityCheckTemplate
      }
    },
    methods: {
      /**
       * 保存pass模板
       */
      saveQualityCheckTemplateTwo (req) {
        this.$store.dispatch('saveQualityCheckTemplateTwo', req)
          .then(resq => {
            if (resq.success) {
              this.$message.success(this.$t('configLazyLoad.qualityCheck.temptip1'))
              this.currentView = ''
              this.getQualityTableData()
            }
          })
      },
      /**
       * 保存打分模板
       */
      saveQualityCheckTemplate (req) {
        this.$store.dispatch('saveQualityCheckTemplate', req)
          .then(resq => {
            if (resq.success) {
              let msg = req._id ? this.$t('configLazyLoad.qualityCheck.temptip2') : this.$t('configLazyLoad.qualityCheck.temptip3')
              this.$message.success(msg)
              this.currentView = ''
              this.getQualityTableData()
            }
          })
      },
      /**
       * 改变模板状态
       */
      changeQualityCheckTemplateStatus (data) {
        let req = {
          _id: data.row._id,
          currentStatus: data.row.enable + ''
        }
        this.$store.dispatch('changeQualityCheckTemplateStatus', req)
          .then(resq => {
            if (resq.success) {
              this.$message.success(this.$t('configLazyLoad.qualityCheck.temptip4'))
              this.getQualityTableData({
                page: data.page,
                limit: 10
              })
            }
          })
      },
      /**
       * 获取模板列表
       */
      getQualityTableData (req = {
        page: 1,
        limit: 10
      }) {
        this.$store.dispatch('queryQualityCheckTemplate', req)
        .then((resq) => {
          if (resq.success) {
            this.initTable = resq.list.map((val) => {
              return {
                _id: val._id,
                name: val.name,
                enable: val.enable,
                type: val.type,
                updateUser: val.updateUser,
                rowData: val
              }
            }) || []
            this.pagination.count = resq.count
            this.pagination.trunPage = req.page
          }
        })
      },
      // 获取打分模板数据
      getScoringData (data) {
        this.updateData = JSON.parse(JSON.stringify(data.rowData))
        if(!this.updateData.gradeConfig){
          this.updateData.gradeConfig = []
          this.updateData.gradeConfig.push(
                  {
                    name:this.$t('qualityCheck.excellent'),
                    'begin': this.updateData['A-begin'],
                    'end':100
                  },
                  {
                    name:this.$t('qualityCheck.qualified'),
                    'begin': this.updateData['B-begin'],
                    'end': this.updateData['B-end']
                  },
                  {
                    name:this.$t('qualityCheck.remind'),
                    'begin':  this.updateData['C-begin'],
                    'end':  this.updateData['C-end']
                  },
                  {
                    name:this.$t('qualityCheck.unqualified'),
                    'begin': 0,
                    'end': this.updateData['D-end']
                  }
            )
        }
        this.currentView = 'updateScore'
      },
      // 切换右边框 编辑 添加 查看按钮 pass 打分模板表单
      changeAddTemp (arg) {
        this.currentView = arg
      },
      // 翻页
      trunPages (page) {
        this.getQualityTableData({
          page,
          limit: 10
        })
      },
      // 获取pass模板数据
      getPassTemplate (data) {
        this.initPassData = data.rowData
        this.currentView = 'showPass'
      }
    },
    components: {
      Affix,
      TemplateTable,
      'addPass': AddPassTemplate,
      'addScoring': AddScoringTemplate,
      'updateScore': UpdateScoringTemplate,
      'showPass': ShowPassTemplate
    },
    beforeMount () {
      // 初始化直接模板列表
      this.getQualityTableData()
    }
  }
</script>

<style lang="stylus" scoped>
  @import "./common"
  .qua-temp__wapper
    padding 16px
    height calc(100vh - 176px)
    overflow-y auto
</style>
